button.dropdown.trigger {
  position: relative;

  &.btn-default {
    --button-background: var(--color-bg-input);
    --button-border-color: var(--color-border-input);
    --button-hover-background: var(--color-bg-input-hover);
    --button-focus-background: var(--color-bg-input-focused);
    --button-active-background: var(--color-bg-input-active);
  }

  > .label {
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: content-box;
    min-height: 1em;
    flex-grow: 1;
    > *:not(:last-child) {
      margin-right: 0.25rem;
    }
  }

  > .arrow {
    display: flex;
    align-items: center;
    padding: 0 0.1rem;
  }
}

.dropdown.content {
  box-shadow: var(
    --Dropdown__box-shadow,
    var(--color-shadow) 0px 10px 15px -3px,
    var(--color-shadow) 0px 4px 6px -2px
  );
  background: var(--color-bg-raised-3);
  border: 1px solid var(--color-border-raised-1);
  border-radius: var(--border-radius-m);
  z-index: var(--dropdown-z-index, 100);
  max-height: calc(100vh - 0.5rem);
  overflow: auto;

  &[data-popper-placement='top-start'] {
    box-shadow:
      var(--color-shadow) 0px -10px 15px -3px,
      var(--color-shadow) 0px -4px 2px -2px;
  }

  &.no-max-height {
    max-height: none;
  }
}
